<style>
    .catetree_box {
        width: 200px;
        min-height: calc(100vh - 120px);
        background: #fff;
        border: solid 1px #f3f2f2;
        margin-right: 15px;
    }

    .articlelist {
        border-bottom: 1px dashed #ccc;
        padding-bottom: 15px;
        padding-top: 15px;
    }

    .articlelist .title {
        font-size: 16px;
        font-weight: 600;
        padding-bottom: 10px;
    }

    .articlelist .op {
        margin-left: 15px;
    }

    .articlelist .desc {
        color: #999;
        line-height: 26px;
        text-indent: 2ch;
        margin-top: 10px;
    }

    .articlelist .desc img {
        width: 100px;
        max-height: 300px;
        margin-right: 20px;
        border: 1px solid #efefef;
        padding: 10px
    }

    .interact {
        background: #F7F7F7;
        padding: 5px 8px;
        display: inline-block;
        border-radius: 4px;
        margin-right: 5px;
        color: #0e9397 !important;
    }

    .pagebar {
        padding: 0 15px;
        text-align: right;
    }

    .layui-tree-set {
        border-radius: 4px;
    }
</style>
<div class="rightcontent rc-bg-grey">
    <div class="rc-pagepadding">
        <div class="rc-flex ">
            <div class="catetree_box">
                <div class=" rc-pannel " style="border: 0;border-radius:0">
                    <div class="rc-pannel-body layui-form " style="padding-right: 15px;padding-top:10px">
                        <div id="ID-tree-demo-showCheckbox"></div>
                    </div>
                </div>
            </div>
            <div class="rc-flex1">

                <div class="rc-pannel ">
                    <form class="layui-form " id="searchform">
                        <div class="rc-flex-vertical-center rc-searchbox">

                            <div id="searchparam">


                            </div>

                            <div class="layui-inline">
                                <div class="layui-form-label">
                                    <input type="hidden" name="cid" id="cid" />
                                    <input type="hidden" name="page" value="1" id="page" />
                                    <button type="button" lay-submit lay-filter="search" class="layui-btn layui-btn-sm layui-btn-primary"><i class="iconfont">&#xeafe;</i> 搜索</button>
                                </div>
                            </div>


                        </div>
                    </form>
                </div>

                <div class=" rc-pannel  rc-margin-top-default" style="border-radius:0">
                    <div class=" rc-pannel-header">
                        <div class="rc-flex layui-form toolbar rc-flex-justify-between">
                            <div>
                                <div class=" rc-flex rc-flex-vertical-center ">
                                    <input type="checkbox" lay-filter="checkAll" autocomplete="off" />
                                    <select style="width: 100px;" lay-filter="quickop">
                                        <option></option>
                                        <option value="del">删除</option>
                                        <option value="movecate">转移分类</option>
                                    </select>
                                </div>

                            </div>
                            <div>
                                <a href="javascript:;" id="add" class="layui-btn layui-btn-primary layui-btn-sm"><i class="iconfont">&#xe60e;</i> 发布内容</a>

                            </div>
                        </div>


                    </div>

                    <div class="rc-pannel-body layui-form rc-pagepadding" id="contentlist">

                    </div>


                    <div class="rc-pannel-footer ">
                        <div id="pagebar" class="pagebar"></div>
                    </div>
                </div>

            </div>
        </div>


    </div>
</div>

<script>
    layui.use(function() {

        var tree = layui.tree;
        var layer = layui.layer;
        var form = layui.form;
        var laypage = layui.laypage;

        /**获取查询字段 */
        function selSearchFields() {
            var searchhtml = '';
            $.ajax({
                url: '/app/cms/admin/Index/index?submittype=selsearchfields&cid=' + $('#cid').val(), //请求路径
                type: "POST", //请求方式
                success: function(data) {
                    if (data.code == 0) {
                        $.each(data.data, function(i, v) {

                            var element = '';
                            if (typeof(v.datadict) != 'undefined') {
                                element = '<select name="' + v.name + '">';
                                element += '<option></option>';
                                $.each(v.datadict.values, function(di, dv) {
                                    element += '<option value="' + dv.realvalue + '">' + dv.displayname + '</option>';
                                })
                                element += '</select>';
                            } else {
                                element = '<input type="text" class="layui-input"  name="' + v.name + '" />';
                            }

                            searchhtml += `                      
                            <div class="layui-inline ">
                                <label class="layui-form-label">` + v.title + `</label>
                                <div class="layui-input-inline ">
                                    ` + element + `
                                </div>
                            </div>
                        `;
                        });

                    }
                    $('#searchparam').html(searchhtml);
                    form.render();

                },
                error: function() {

                },

            });
        }

        /**获取文章 */
        var total = 0;

        function selcontents() {
            $('#contentlist').html('');
            $.ajax({
                url: '/app/cms/admin/Index/index?submittype=selcontents', //请求路径
                type: "get", //请求方式
                data: $('#searchform').serialize(),
                async: false,
                success: function(data) {
                    if (data.code == 0) {
                        var contentlist = '';
                        $.each(data.data.items, function(i, v) {
                            var img = '';
                            if (v.thumb != '') {
                                img = '<img src="' + v.thumb + '" />';
                            }
                            var tags = '';
                            $.each(v.tags, function(ti, tv) {
                                tags += '<span class="layui-badge ">' + tv.tag + '</span>';
                            })


                            contentlist += `
                             <div class="articlelist">
                                <div><input type="checkbox" class="item_checkbox" value="` + v.id + `"/> 
                                    <a href="/app/cms/admin/Index/edit?cid=` + v.cid + `&id=` + v.id + `" class=" title">
                                        ` + v.title + `
                                       ` + tags + `
                                     </a>  
                                </div>
                                <div class="desc rc-flex">
                                   ` + img + `
                                    <div>
                                        ` + (v.content.replace(/<[^>]*>/g, '')).substr(0, 200) + `
                                    </div>
                                </div>

                                <div class="rc-flex rc-flex-justify-between rc-flex-vertical-center" style="margin-top:15px">
                                    <div class="rc-flex1">
                                        <a class="interact"><i class="layui-icon layui-icon-praise"></i> 点赞(` + v.praisecount + `)</a>
                                        <a class="interact collect" cid="` + v.cid + `" contentid="` + v.id + `"><i class="layui-icon layui-icon-star-fill"></i> 收藏(` + v.collectcount + `)</a>
                                        <a class="interact comment" cid="` + v.cid + `" contentid="` + v.id + `"><i class="layui-icon layui-icon-reply-fill "></i> 评论(` + v.commentcount + `)</a>
                                        <a class="interact"><i class="layui-icon layui-icon-eye"></i> 浏览(` + v.viewscount + `)</a>



                                    </div>
                                    <div style="width:400px;text-align:right">
                                     <a class="op rc-tips" message="权重越高排序越靠前">权重 <input cid='` + v.cid + `' id="` + v.id + `" type="text" class="layui-input weight" value="` + v.weight + `" style="width:60px;display:inline;height: 26px !important;" /> </a>
                                     <a href="/app/cms/home/Index/page?cid=` + v.cid + `&id=` + v.id + `" target="_blank" class="op rc-tips" message="预览"><i class="iconfont">&#xe639;</i> 预览</a>
                                     <a class="op rc-tips" message="编辑" href="/app/cms/admin/Index/edit?cid=` + v.cid + `&id=` + v.id + `"><i class="iconfont">&#xe61b;</i> 编辑</a>
                                    </div>
                                </div>
                            </div>`;
                        });
                        $('#contentlist').html(contentlist);
                        form.render();

                        renderPagebar(data.data.total);
                    }
                },
                error: function() {

                },

            });
        }

        //渲染分页条
        function renderPagebar(nowtotal) {
            if (nowtotal != total) {
                total = nowtotal;
                laypage.render({
                    elem: 'pagebar',
                    limit: 10,
                    count: total, // 数据总数
                    jump: function(obj, first) {
                        $('#page').val(obj.curr);
                        if (!first) {
                            selcontents();
                        }

                    }
                });
            }

        }


        // 渲染左侧栏目
        var cates = '<?php echo $cates ?>';
        var catesobj = eval("(" + cates + ")");

        tree.render({
            elem: '#ID-tree-demo-showCheckbox',
            id: 'test',
            data: catesobj,
            showCheckbox: false,
            click: function(obj) {
                const primaryColor = style.getPropertyValue('--primary-color').trim();
                if (typeof(obj.data.children) === 'undefined') {
                    $('.layui-tree-set').find('.layui-tree-txt').removeAttr('style');
                    $(obj.elem).find('.layui-tree-txt').css({
                        'color': primaryColor,
                        'font-weight': 600
                    });

                    $('#cid').val(obj.data.id);
                    window.history.pushState({}, '', window.location.pathname + "?cid=" + obj.data.id);
                    selSearchFields();
                    selcontents();
                }


            }

        });

        <?php
        if (request()->get('cid', '') == '') {
        ?>
            if (catesobj.length > 0) {
                initCheckCate(catesobj[0]);
            }

        <?php
        } else {
        ?> $('#cid').val(<?php echo request()->get('cid') ?>);
            $('.layui-tree').find("[data-id=" + $('#cid').val() + "]").find('.layui-tree-txt').css({
                'color': primaryColor,
                'font-weight': 600
            });
            selSearchFields();
            selcontents();
        <?php
        }
        ?>

        //初始化 Cid
        function initCheckCate(catesobj) {
            if (typeof(catesobj.children) !== 'undefined') {
                initCheckCate(catesobj.children[0]);

            } else {
                $('#cid').val(catesobj.id);
                $('.layui-tree').find("[data-id=" + catesobj.id + "]").find('.layui-tree-txt').css({
                    'color': primaryColor,
                    'font-weight': 600
                });

                window.history.pushState({}, '', window.location.pathname + "?cid=" + catesobj.id);
                selcontents();
            }
        }


        $('#add').click(function() {
            window.location.href = '/app/cms/admin/Index/add?cid=' + $('#cid').val();
        })



        //select 快捷操作
        form.on('select(quickop)', function(data) {
            var elem = data.elem; // 获得 select 原始 DOM 对象
            var value = data.value; // 获得被选中的值
            var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象
            var ids = getAllChkIds();
            if (value == 'movecate') {
                layer.open({
                    type: 2,
                    title: '转移分类',
                    shadeClose: true,
                    maxmin: false, //开启最大化最小化按钮
                    area: ['800px', '480px'],
                    content: '/app/cms/admin/Index/moveCate?fromcid=' + $('#cid').val() + '&contentids=' + ids
                });
            }

            if (value == 'del') {
                //删除

                layer.confirm('确定要删除么？删除后将会放入到回收站', {
                    btn: ['确定', '关闭'] //按钮
                }, function() {

                    $.ajax({
                        url: '/app/cms/admin/Index/joinRecycle', //请求路径
                        type: "POST", //请求方式
                        data: {
                            cid: $('#cid').val(),
                            contentids: ids
                        },
                        success: function(data) {
                            layer.closeAll();
                            if (data.code == 0) {
                                toastr_success("删除成功", function() {
                                    window.location.reload();
                                });
                            } else {
                                toastr_error(data.message);
                            }
                        },
                        error: function() {

                        },

                    });


                }, function() {


                });


            }

        });



        // $('.weight').blur
        $('.rightcontent').on('blur', '.weight', function() {

            var id = $(this).attr('id');
            var cid = $(this).attr('cid');
            var weight = $(this).val();
            $.ajax({
                url: '/app/cms/admin/Index/setWeight', //请求路径
                type: "POST", //请求方式
                data: {
                    id: id,
                    cid: cid,
                    weight: weight
                },
                success: function(data) {
                    layer.closeAll();
                    if (data.code == 0) {
                        toastr_success("设置成功", function() {

                        });
                    } else {
                        toastr_error(data.message);
                    }
                },
                error: function() {

                },

            });


        })

        //搜索表单提交
        form.on('submit(search)', function(data) {
            var obj = data.field;
            search(obj);

        });


        //搜索
        function search(obj) {
            var param = '';
            for (const key in obj) {
                if (Object.hasOwnProperty.call(obj, key)) {
                    param += key + '=' + obj[key] + '&';
                }
            }
            window.history.pushState({}, '', window.location.pathname + "?" + param);
            selcontents();
        }


        //查看评论
        $('.rightcontent').on('click', '.comment', function() {
            layer.open({
                type: 2,
                offset: 'r',
                anim: 'slideLeft', // 从右往左
                title: '文章评论',
                area: ['800px', '100%'],
                shade: 0.1,
                id: 'ID-demo-layer-direction-r',
                content: '/app/cms/admin/Comment/index?cid=' + $(this).attr('cid') + '&contentid=' + $(this).attr('contentid')
            });
        });

        //查看收藏
        $('.rightcontent').on('click', '.collect', function() {
            layer.open({
                type: 2,
                offset: 'r',
                anim: 'slideLeft', // 从右往左
                title: '文章收藏',
                area: ['800px', '100%'],
                shade: 0.1,
                id: 'ID-demo-layer-direction-r',
                content: '/app/cms/admin/Collect/index?cid=' + $(this).attr('cid') + '&contentid=' + $(this).attr('contentid')
            });
        });


    });
</script>